<template>
    <view class="container">
        <!-- 搜索栏 -->
        <view class="search-box animated-item" style="animation-delay: 0.1s">
            <u-search placeholder="搜索课程" v-model="keyword" bgColor="#f5f7fa" @search="handleSearch" @custom="handleSearch"></u-search>
        </view>

        <!-- 课程列表 -->
        <view class="course-list">
            <view v-for="(item, index) in courseList" :key="index" class="course-card animated-item"
                :style="{animationDelay: `${0.2 + index*0.1}s`}"
                @click="openCourse(item.courseId)">
                <u-image :src="item.coverImage" width="160px" height="100px" radius="8rpx" mode="aspectFill"></u-image>

                <view class="course-info">
                    <u-text :text="item.title" bold size="16" lineHeight="1.5"></u-text>
                    <u-text :text="item.description" size="12" color="#909399" :customStyle="{ 
                        margin: '10rpx 0', 
                        display: '-webkit-box', 
                        '-webkit-box-orient': 'vertical',
                        '-webkit-line-clamp': '2',
                        overflow: 'hidden',
                    }" class="description"></u-text>
                    <view class="meta">
                        <u-text :text="item.createBy" size="12" color="#606266"></u-text>
                        <u-text :text="formatDate(item.createTime)" size="12" color="#909399"></u-text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        listCourse
    } from '@/api/coursestudy/course.js'
    export default {
        data() {
            return {
                keyword: '',
                courseList: [
                    {
                        course_id: 1,
                        title: '劳动研学入门课程',
                        cover_image: '/static/images/course1.jpg',
                        description: '本课程将带领您了解劳动研学的基本概念和实践方法',
                        video_url: '',
                        status: '0',
                        create_by: '研学教育中心',
                        create_time: '2023-06-10 09:30:00'
                    },
                    {
                        course_id: 2,
                        title: '乡村文化体验课程',
                        cover_image: '/static/images/course2.jpg',
                        description: '深入乡村体验传统文化，学习非遗技艺',
                        video_url: '',
                        status: '0',
                        create_by: '文化传承部',
                        create_time: '2023-06-05 14:15:00'
                    },
                    {
                        course_id: 3,
                        title: '自然生态研学课程',
                        cover_image: '/static/images/course3.jpg',
                        description: '探索自然奥秘，培养生态保护意识',
                        video_url: '',
                        status: '0',
                        create_by: '生态教育组',
                        create_time: '2023-05-20 10:20:00'
                    }
                ]
            }
        },
        onLoad() {
            this.getCourseList();
        },
        methods: {
            handleSearch() {
                // 调用搜索接口
                this.getCourseList(this.keyword)
            },

            async getCourseList(keyword = '') {
                const params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    title: keyword // 添加搜索关键词参数
                }

                const res = await listCourse(params)
                if (res.code === 200) {
                    this.courseList = res.rows.map(item => ({
                        ...item,
                        coverImage: `http://localhost:8080${item.coverImage}`
                    }))
                }
            },
            formatDate(dateStr) {
                if (!dateStr) return '';
                const date = new Date(dateStr);
                return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
            },
            openCourse(courseId) {
                uni.navigateTo({
                    url: `/pages/index/hotCourse/detail?courseId=${courseId}`
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 20rpx;
        background-color: #fff;
        min-height: 100vh;
    }

    .search-box {
        padding: 20rpx;
        background-color: #fff;
    }

    .course-list {
        margin-top: 20rpx;
    }

    .course-card {
        display: flex;
        padding: 20rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 8rpx;
        box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);

        .course-info {
            flex: 1;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .description {
                margin: 10rpx 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 1.5; 
                height: 60rpx; 
            }

            .meta {
                display: flex;
                justify-content: space-between;
                margin-top: 10rpx;
            }
        }
    }

    /* 新增动画样式 */
    .animated-item {
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>